<%@ page language="java" isELIgnored="false"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
<link href="/admin/public/bootstrap.min.css" title="" rel="stylesheet" />
<link href="/admin/public/inspinia.css" rel="stylesheet" />
<link href="/admin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" />
<link href="/admin/public/animate.css" rel="stylesheet" />
<link
	href="/admin/css/plugins/datetimepicker/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen" />
<link href="/admin/public/zTree/css/zTreeStyle/zTreeStyle.css"
	rel="stylesheet" />
<link href="/admin/js/multipleselect/multiple-select.css"
	rel="stylesheet" />
<link rel="stylesheet" href="/admin/css/Tab_swiper.css" />
<link rel="stylesheet" href="/admin/css/new_page_if.css" />
<link rel="stylesheet" type="text/css"
	href="${request.getContext }/admin/css/xcConfirm.css" />
<script src="/admin/My97/WdatePicker.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
	<script src="/admin/public/html5shiv.min.js"></script>
	<script src="/admin/public/respond.min.js"></script>
<![endif]-->
<style>
th.prev {
	background: url(img/dateleft.png) -3px !important;
}

th.next {
	background: url(img/dateright.png) -10px !important;
}
.img{
	height: 300px;
	width:300px;
}
</style>
</head>
<body>
	<div
		style="width: 20px; height: 100%; position: relative; left: 16px; box-shadow: -5px 0 20px #8e9092;">
	</div>
	<div class="container-frame-detail" id="containerDetail"
		style="display: block; right: 0px; width: 780px; position: relative; bottom: 100%; left: 16px; height: 100%;">
		<div class="detail-inner" id="detailInner">
			<div class="slid-panel-header clearfix">
				<span class="panel-title">修改二维码</span> <span class="form-close-icon">X</span>
			</div>
			<div class="detail_left">
				<div class="detail_left_inner">

					<!-- <div class="cus_simple_info">
                        <div class="tagSelector-warp">
                            <div class="tag-item-list">
                                <span class="tag-inputContainer"><span class="span-tag">+标签</span> </span>
                                <div class="tag-pullDown-container-down">
                                </div>
                            </div>
                        </div>
                    </div>-->
					<div class="customer_tabs fn-clear"
						style="margin-right: 30px; margin-left: 10px;">
						<ul class="detail_main_nav">
							<li><a class="slide-panel-tab slide_nav_hover"
								href="javascript:void(0)">修改二维码</a></li>
						</ul>
						<div class="detail_panels_main_body">
							<div id="renWu_msg" class="active">
								<form id="upClient" method="post" class="form-horizontal" enctype="multipart/form-data" novalidate="novalidate">
									<input type="hidden" name="shopcourseId" id="shopcourseId" value="${shopcourseId }">
									<input type="hidden" name="oldpicUrl" id="oldpicUrl" value="${picUrl }">
									<div class="form-group">
										<label class="col-lg-2 col-md-2 col-sm-3 control-label"><span style="color:red;">*</span>选择门店:</label>
										<div class="col-md-6 col-lg-6 col-sm-6">
											<select class="select2_demo_1 form-control" name="shopId" id="shopId">
												<c:forEach items="${shopNameList }" var="item">
													<option value="${item.shopId }" <c:if test="${shopId eq item.shopId }">selected="selected" </c:if>>${item.shopName }</option>
												</c:forEach>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label class="col-lg-2 col-md-2 col-sm-3 control-label"><span style="color:red;">*</span>课程类型:</label>
										<div class="col-md-6 col-lg-6 col-sm-6">
											<select class="select2_demo_1 form-control" name="courseType"
											id="courseType">
												<option value="0" <c:if test="${courseType eq 0 }">selected="selected" </c:if>>团课</option>
												<option value="2" <c:if test="${courseType eq 2 }">selected="selected" </c:if>>训练营</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label class="col-lg-2 col-md-2 col-sm-3 control-label"><span style="color:red;">*</span>二维码图片:</label> 
										<div class="col-md-6 col-lg-6 col-sm-6">
											<input type="file" class="form-control" id="picUrl"
										name="picUrl"  onchange="preview(this,1)" >
										</div>
									</div>
									<div class="form-group">
										<label class="col-lg-2 col-md-2 col-sm-3 control-label"></label> 
										<div class="col-md-6 col-lg-6 col-sm-6">
											<div id="preview1">
												<img src="${picUrl }" alt="" width="300px" height="300px"/>
											</div>
										</div>
									</div>
							</div>
								<px:authorize setting="二维码-修改二维码">
									<input type="button" onclick="up();"
										style="width: 82px; height: 34px; margin-left: 12px" value="保存"
										class="col-lg-3 btn btn-success" />
								</px:authorize>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<script src="/admin/public/jquery-1.11.3.js"></script>
	<script src="/admin/js/jquery.form.min.js"></script>
	<script src="/admin/js/plugins/lhgdialog/lhgdialog.js"></script>
	<!-- 时间控件样式 -->
	<script
		src="/admin/js/plugins/datetimepicker/bootstrap-datetimepicker.min.js"></script>
	<script
		src="/admin/js/plugins/datetimepicker/bootstrap-datetimepicker-update.min.js"></script>
	<script
		src="/admin/js/plugins/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
	<!-- 弹出框 -->
	<script src="/admin/js/multipleselect/multiple-select.js"></script>
	<script src="${request.getContext }/admin/js/xcConfirm.js"
		type="text/javascript" charset="utf-8"></script>
	<!--    <script src="/admin/js/Tab_swiper.js"></script>-->
	<script src="/admin/js/new_page_if.js"></script>
	<!-- ajax上传文件要的包 -->
	<script type="text/javascript">
		function preview(file, i) {
			var prevDiv = document.getElementById('preview' + i);
			if (file.files && file.files[0]) {
				var reader = new FileReader();
				reader.onload = function(evt) {
					prevDiv.innerHTML = '<img class="img" src="' + evt.target.result + '" />';
				}
				reader.readAsDataURL(file.files[0]);
			} else {
				prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
			}
		}
	</script>
	<script type="text/javascript">
		function check() {
			var shopId = $("#shopId").val();
			var courseType = $("#courseType").val();
			var picUrl = $("#picUrl").val();
			if (shopId == null || shopId == '') {
				alertNew("请选择门店！", false);
				return false;
			}
			if (courseType == null || courseType == '') {
				alertNew("请选择课程类型！", false);
				return false;
			}
			return true;
	
		}
		//修改二维码
		function up() { 
			if(check()){
			     var formData = new FormData($( "#upClient" )[0]);  
			     $.ajax({  
			          url: '/admin/QRcode/updateQR' ,  
			          type: 'POST',  
			          data: formData,  
			          async: false,  
			          cache: false,  
			          contentType: false,  
			          processData: false,  
			          success: function (data) {  
			        	  if (data.success) {
								window.wxc.xcConfirm(data.msg, window.wxc.xcConfirm.typeEnum.info,{onOk:function(){ 
									window.parent.location.href="/admin/QRcode/list";
						  		}})
							}else{
								alertNew(data.msg, false);
							}
			          },  
			          error: function (data) {  
			        	  alert("很抱歉，未知的错误发生了！"); 
			          }  
			     });  
			}
		}
		
	</script>
	<script type="text/javascript">
		//中心点
		if ($("[name='jingdu']").val().length != 0) {
			var dw = [ $("[name='jingdu']").val(), $("[name='weidu']").val() ];
		} else {
			var dw = [ 121.471253, 31.2216 ];
		}
		var map = new AMap.Map('container', {
			resizeEnable : true,
			zoom : 10,
			center : dw

		});
		//加入经纬度
		$(function() {
			if ($("[name='jingdu']").val().length != 0) {
				addMarker($("[name='jingdu']").val(), $("[name='weidu']").val());
			}
		})
		//为地图注册click事件获取鼠标点击出的经纬度坐标
		var clickEventListener = map.on('click', function(e) {
			addMarker(e.lnglat.getLng(), e.lnglat.getLat());
			$("[name='jingdu']").val(e.lnglat.getLng());
			$("input[name='weidu']").val(e.lnglat.getLat());
			lnglatXY = [ e.lnglat.getLng(), e.lnglat.getLat() ]; //已知点坐标
			map.getCity(function(data) {
			     if (data['province'] && typeof data['province'] === 'string') {
			         //alert(data.province)//省
			         //alert(data.city)//市
			         //alert(data.district)//区
			         //alert(data.citycode)//区号
			         $("#province").val(data.province);
			         $("#city").val(data.city);
			         $("#district").val(data.district);
			         if(data.province == "北京市"){
						 $("#city").val("北京市");
			         }
					 if(data.province == "上海市"){
						 $("#city").val("上海市");
			         }
					 if(data.province == "重庆市"){
						 $("#city").val("重庆市");
			         }
					 if(data.province == "天津市"){
						 $("#city").val("天津市");
			         }
			     }
			 });
			//获取位置
			regeocoder();
		});

		//显示位置
		function regeocoder() { //逆地理编码
			var geocoder;
			AMap.plugin([ 'AMap.Geocoder' ], function() {
				geocoder = new AMap.Geocoder({
					radius : 1000,
					extensions : "all"
				});
			});
			geocoder.getAddress(lnglatXY, function(status, result) {
				if (status === 'complete' && result.info === 'OK') {
					if ($(".amap-indoormap-floorbar-control").is(":visible")) {//楼层条是否显示
						door = $(".selected").find("div").html();
						$("input[name='shopaddress']").val(
								result.regeocode.formattedAddress + door);
					} else {
						$("input[name='shopaddress']").val(
								result.regeocode.formattedAddress);
					}
				}
			});
		}
		//查询功能
		var auto = new AMap.Autocomplete({
			input : "tipinput"
		});
		AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
		function select(e) {
			if (e.poi && e.poi.location) {
				map.setZoom(15);
				map.setCenter(e.poi.location);
			}
		}

		//加标记
		var markers = [];
		function addMarker(lng, lat) {
			map.remove(markers);
			marker = new AMap.Marker(
					{
						icon : "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
						position : [ lng, lat ]
					});
			marker.setMap(map);
			markers.push(marker);
		}

		/*1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111*/

		var noResultsMatch = '没有匹配结果';
		var defaultChosenOptions = {
			no_results_text : noResultsMatch,
			width : '100%',
			allow_single_deselect : true,
			disable_search_threshold : 1,
			placeholder_text_single : ' ',
			placeholder_text_multiple : ' ',
			search_contains : true
		};
		var config = {
			'.chosen-select' : {},
			'.chosen-select-deselect' : {
				allow_single_deselect : true
			},
			'.chosen-select-no-single' : {
				disable_search_threshold : 10
			},
			'.chosen-select-no-results' : {
				no_results_text : 'Oops, nothing found!'
			},
			'.chosen-select-width' : {
				width : "95%"
			}
		}
		for ( var selector in config) {
			$(selector).chosen(config[selector]);
		}
	</script>
</body>
</html>
